<%@page contentType="text/html; charset=utf-8"%>
<%@include file="/WEB-INF/views/common/taglibs.jspf" %>
<title>系统用户管理</title>

<link rel="stylesheet" href="${ctx}/static/admin/ace/css/jquery-ui.css" />
<link rel="stylesheet" href="${ctx}/static/admin/ace/css/jquery.gritter.css" />
<link rel="stylesheet" href="${ctx}/static/admin/ace/css/datepicker.css" />

<div class="page-header">
	<h1>
		系统用户列表 
	</h1>
</div>
<div class="row">
	<div class="col-xs-12">
	
		<div class="row">
			<div class="col-xs-12">
			
				<table id="oTable" class="table table-striped table-bordered table-hover">
			        <thead>
			        <tr>
			            <th class="center">
							<label class="position-relative">
								<input type="checkbox" class="ace" />
								<span class="lbl"></span>
							</label>
						</th>
			            <th>序号</th>
			            <th>编号</th>
			            <th>用户名</th>
			            <th>密码</th>
			            <th>操作</th>
			        </tr>
			        </thead>
			        <tbody></tbody>
			        <!-- tbody是必须的 -->
			    </table>
				
			</div>
		</div>
		
		
		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->



<!--定义操作列按钮模板-->
<script id="func_tpl" type="text/x-handlebars-template">
    {{#each func}}
		<button class="btn btn-xs btn-{{this.type}}" onclick="{{this.fn}}">
			<i class="ace-icon fa fa-{{this.icon}}"></i>
				{{this.name}}
		</button>
    {{/each}}
</script>
<!-- head toolbar -->
<script id="head_toolbar_tpl" type="text/x-handlebars-template">
	<span class="input-icon">
		<input type="text" class="date-picker input-sm input-medium" data-date-format="yyyy-mm-dd">
		<i class="ace-icon fa fa-calendar blue"></i>
	</span>
	<span class="input-icon">
		<input type="text" class="date-picker input-sm input-medium" data-date-format="yyyy-mm-dd">
		<i class="ace-icon fa fa-calendar blue"></i>
	</span>
	<span class="input-icon">
		<input type="text" placeholder="关键字" class="input-sm">
		<i class="ace-icon fa fa-filter blue"></i>
	</span>
	<button class="btn btn-purple btn-xs" onclick="oSearch();">
		<i class="ace-icon fa fa-search"></i>
		搜索
	</button>
	<button class="btn btn-pink btn-xs">
		<i class="ace-icon fa fa-share bigger-100"></i>
		重置
	</button>
	<button class="btn btn-success btn-xs" onclick="oTable.ajax.reload();">
		<i class="ace-icon fa fa-search"></i>
		刷新
	</button>
</script>
<!-- footer toolbar -->
<script id="footer_toolbar_tpl" type="text/x-handlebars-template">
	<button class="btn btn-success btn-xs" onclick="formDialog();">
		<i class="ace-icon fa fa-plus bigger-100"></i>
		新增
	</button>
	<button class="btn btn-danger btn-xs" onclick="batchDel();">
		<i class="ace-icon fa fa-trash bigger-100"></i>
	</button>&nbsp;
</script>

<script type="text/javascript">
var oTable, dialogIndex ;
var scripts = [null, null, null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	jQuery(function($) {
		initDataTable() ;
	});
});

function initDataTable() {
	var func_tpl = $("#func_tpl").html();
    var func_template = Handlebars.compile(func_tpl);	 //预编译模板
    var _url = "${ctx}/admin/sys/user/datatables" ;
    
    oTable = $("#oTable").DataTable({
		ajax: _url,
		processing: true, serverSide: true, paging: true,
		autoWidth: false, scrollCollapse: true,
		order: [[2, "desc"]], pagingType: "full_numbers",
		lengthMenu: [[3, 10, 25, 50, -1], [3, 10, 25, 50, "All"]],
		language: {"url": "${ctx}/static/json/dataTable-language.json"},
		dom:	"<'#head_toolbar' <'float_right'f>>  " +
				"t" +
				"<'row'<'col-xs-12' <'#footer_toolbar'><'float_left'i> "+
				"<'float_right'l><'float_right'p>> >",
		columns: [
               {"data": null, sWidth: 50, sClass: "center", bSortable: false},
               {"data": null, sWidth: 50, sClass: "center", bSortable: false, searchable: false, orderable: false},
               {"data": "id", bSortable: true, sDefaultContent : ""},
               {"data": "username", bSortable: true, sDefaultContent : ""},
               {"data": "password", sWidth: 500, bSortable: true, sDefaultContent : ""},
               {"data": null, "bSortable": false}
		],
		columnDefs: [{
			targets: 0,
			render: function (a, b, c, d) {
				var s = '<label class="position-relative"><input type="checkbox" class="ace" /><span class="lbl"></span></label>';
				return s;
			}
		},{
			targets: 5,
			render: function (a, b, c, d) {
				var context = {
						func: [
						       {"name": "修改", "type": "info", "icon": "pencil-square-o", "fn": "formDialog(\'" + c.id + "\')"}, 
						       {"name": "删除", "type": "danger", "icon": "trash", "fn": "del(\'" + c.id + "\')"}
						       ]
				};
				var html = func_template(context);
				return html;
			}
		}],
		initComplete: function(){
			var head_toolbar_tpl = $("#head_toolbar_tpl").html() ;
			var head_toolbar_template = Handlebars.compile(head_toolbar_tpl);
			$("#head_toolbar").append(head_toolbar_template());
			
			var footer_toolbar_tpl = $("#footer_toolbar_tpl").html() ;
			var footer_toolbar_template = Handlebars.compile(footer_toolbar_tpl);
			$("#footer_toolbar").addClass("float_left").append(footer_toolbar_template());
			
			//快速搜索样式修改
			var search = $("#oTable_filter");
			search.find(":input").attr("placeholder", "快速搜索...").attr("type", "").wrap("<span class='input-icon'></span>") ;
			search.find("span").append("<i class='ace-icon fa fa-search nav-search-icon blue'></i>");
			
			$('.date-picker').datepicker({
				autoclose: true,
				todayHighlight: true
			});
		}
				
				
	});
	
	//序号
	oTable.on("draw", function () {
		oTable.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i){
			cell.innerHTML = i+1;
        });
	});
	//复选框-全选
	oTable.on("click", "thead tr th input:checkbox" , function(){
		var that = this ;
		$(this).closest('table').find('tr > td:first-child input:checkbox').each(function(){
			if(this.checked == false) {
				that.checked = true;
				this.checked = true ;
				$(this).closest("tr").addClass('selected') ;
				$("#oTable").removeClass('table-striped');
			}else if(this.checked == true) {
				this.checked = false ;
				$(this).closest("tr").removeClass('selected') ;
			}
			if(!$("#oTable tbody tr").hasClass("selected")) {
				$("#oTable").addClass('table-striped');
				that.checked = false;
			}
		});
	});
	//复选框-多选
	oTable.on("click", "tbody tr td input:checkbox" , function(){
		$("#oTable").removeClass('table-striped');
		$(this).closest("tr").toggleClass('selected') ;
		
		if(!$("#oTable tbody tr").hasClass("selected")) {
			$("#oTable").addClass('table-striped');
		}
	});
	
}

function formDialog(id){
	var url = "${ctx}/admin/sys/user/form" ;
	if(undefined != id && id != "") {
		url = "${ctx}/admin/sys/user/form?id="+id ;
	}
	var loadIndex = layer.load(0, {shade : [0.3]});
	$.ajax({
		url: url, cache:false
	}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
		if(event.status == 404) { }
	}).done(function(result){
		dialogIndex = layer.open({
		    type: 1, //page层
		    area: ['900px', '500px'],
		    title: '添加',
		    skin: 'seaning', //墨绿风格
		    shade: 0.6, //遮罩透明度
		    shift: 2, //0-6的动画形式，-1不开启 
		    scrollbar: false, //禁用浏览器滚动条
		    content: result,
		    success: function(layero, index){ layer.close(loadIndex); },
		    btn: ['提交', '取消'],
		    yes: function(index, layero){
		    	if(undefined == id) {
		    		add() ;
		    	} else {
		    		edit() ;
		    	}
		    },cancel: function(index){}
		}); 
	});
};


function add() {
	var msgIndex = layer.msg('数据提交中...', { icon: 17, shade: [0]}); 
	var data = $.shine.serializeObject("#form");
	
	$.ajax({
		type: "POST",
		url: "${ctx}/admin/sys/user/add",
		data: data, dataType: "JSON",
	}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
		layer.close(msgIndex);
	}).done(function(result){
		if(result.error != null  && result.error != undefined) {
			layer.msg('发生错误！', { icon: 2, time: 1000, shade: [0] }, function(){ layer.close(msgIndex); }); 
		} else {
			oTable.ajax.reload();
			layer.close(msgIndex);
			layer.close(dialogIndex) ;
			$.gritter.add({
				text: '<i class="ace-icon fa fa-check bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">'+result.message+'</span>',
				class_name: 'gritter-success'
			});
		}
	});
}

function edit() {
	var msgIndex = layer.msg('数据提交中...', { icon: 17, shade: [0]}); 
	var data = $.shine.serializeObject("#form");
	
	$.ajax({
		type: "POST",
		url: "${ctx}/admin/sys/user/update",
		data: data, dataType: "JSON",
	}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
		layer.close(msgIndex);
	}).done(function(result){
		if(result.error != null  && result.error != undefined) {
			layer.msg('发生错误！', { icon: 2, time: 1000, shade: [0] }, function(){ layer.close(msgIndex); }); 
		} else {
			oTable.ajax.reload();
			layer.close(msgIndex);
			layer.close(dialogIndex) ;
			$.gritter.add({
				text: '<i class="ace-icon fa fa-check bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">'+result.message+'</span>',
				class_name: 'gritter-success'
			});
		}
	});
}

function del(id) {
	bootbox.confirm("你确定要删除吗?", function(result) {
		if(result) {
			$.ajax({
				type: "GET", dataType: "JSON",
				url: "${ctx}/admin/sys/user/delete/"+id,
			}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
				layer.msg('删除发生错误！', { icon: 2, time: 1000, shade: [0] }); 
			}).done(function(result){
				if(result.error != null  && result.error != undefined) {
					layer.msg('删除发生错误！', { icon: 2, time: 1000, shade: [0] }); 
				} else {
					oTable.ajax.reload();
					$.gritter.add({
						text: '<i class="ace-icon fa fa-check bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">'+result.message+'</span>',
						class_name: 'gritter-success'
					});
				}
			});
		}
	});
}

function batchDel() {
	var ids = [] ;
	var rows = oTable.rows(".selected") ;
	$.each(rows.data(), function(){ 
		ids.push(this.id);
	});
	if(ids.length > 0) {
		bootbox.confirm("你确定要删除吗?", function(result) {
			if(result) {
				$.ajax({
					type: "POST", dataType: "JSON", data: {"ids" : ids.join(',')},
					url: "${ctx}/admin/sys/user/delete",
				}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
					layer.msg('删除发生错误！', { icon: 2, time: 1000, shade: [0] }); 
				}).done(function(result){
					if(result.error != null  && result.error != undefined) {
						layer.msg('删除发生错误！', { icon: 2, time: 1000, shade: [0] }); 
					} else {
						$("#oTable thead tr th input:checkbox").attr("checked", false);
						oTable.ajax.reload();
						$.gritter.add({
							text: '<i class="ace-icon fa fa-check bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">'+result.message+'</span>',
							class_name: 'gritter-success'
						});
					}
				});
			}
		});
	} else {
		$.gritter.add({
			text: '<i class="ace-icon fa fa-check bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">请选中要删除的数据！</span>',
			class_name: 'gritter-error'
		});
	}
}
function oSearch() {
	
}

</script>
